<template>
  <view>
    <view class="content">
      <view class="cover-fixed">
        <view class="cover_bar cover_bar_srcoll">
          <view class="cover-user">
            <view>{{ Til.index.wzlogo }}</view>
          </view>
        </view>
      </view>
      <block>
        <view class="info-bg">
          <image class="fengrui-img" src="../../static/images/infobg.png" mode="aspectFill" />
         <swiper :autoplay="true" :interval="3000" :duration="500" :circular="true" class="swiper">
           <swiper-item v-for="(item, index) in lunbo" :key="index" @click="getlunbo(index)">
             <image class="swiper-img" :src="web + item.url" />
           </swiper-item>
           <!-- 腾讯小程序广告 -->
           <swiper-item v-if="lunboad">
			 <ad :unit-id="lunboad" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
           </swiper-item>
         </swiper>

          <view class="izda">
            <liu-search-bar :mode="1" @confirm="confirm" borderRadius="12rpx" bgColor="#fdfdfdb0" borderColor="#b6b6de" :placeholder="Til.index.kmnm"></liu-search-bar>
          </view>
        </view>
		
        <view class="group-icon-view" :style="Til.basic.dir">
          <block>
            <button class="group-icon-item" @click="talon()">
              <view class="group-icon-icon">
                <image class="fengrui-img" src="../../static/images/doc.png" mode="widthFix" />
              </view>
              <view class="group-icon-text">
                {{ Til.index.jl }}
              </view>
            </button>

            <button class="group-icon-item" @click="abuot()">
              <view class="group-icon-icon">
                <image class="fengrui-img" src="../../static/images/about.png" mode="widthFix" />
              </view>
              <view class="group-icon-text">
                {{ Til.index.gyw }}
              </view>
            </button>

            <button class="group-icon-item" open-type="share">
              <view class="group-icon-icon">
                <image class="fengrui-img" src="../../static/images/share.png" mode="widthFix" />
              </view>
              <view class="group-icon-text">
                {{ Til.index.fx }}
              </view>
            </button>

            <button class="group-icon-item" @click="abuoti()">
              <view class="group-icon-icon">
                <image class="fengrui-img" src="../../static/images/kefu.png" mode="widthFix" />
              </view>
              <view class="group-icon-text">
                {{ Til.index.wd }}
              </view>
            </button>

          </block>
        </view>
		
         <!-- #ifdef MP-WEIXIN -->
        <!-- 公告 -->
        <view class="notice" :style="Til.basic.dir">
          <text class="notice-h">{{ Til.index.gg }}：</text>
          {{ data.data.xcx_gonggao }}
        </view>
        <!-- 标题 -->
        <view class="ds-felx" :style="Til.basic.dir">
          <view class="title">
            {{ Til.index.xzkm }}
          </view>
		  <view style="font-size: 27rpx;margin: 28rpx;">{{ currentDate | formatDate }}</view>
        </view>
        <!-- 滚动案例区 -->
          <swiper class="swiper-case" next-margin="260rpx" v-if="izmod=='0'">
            <block v-for="(item,index) in classArray" :key="index">
              <swiper-item class="swiper-case-item" @click="getdetali(index)">
		
                <view class="swiper-case-list" :style="Til.basic.dir">
					<view class="izgodi" :style="Til.basic.dir">{{ item.name }} </view>
                  <view class="swiper-case-flex">
                    <view class="swiper-case-title font-ooverflow-one">{{ item.payName }}</view>
                  </view>
                  <view class="swiper-case-desrc font-ooverflow-two">{{ item.introduce }}</view>
                  <view class="swiper-case-img">
                    <image class="fengrui-img" :src="web+item.url"></image>
                  </view>
                </view>
                <view v-if="item.izfs == '0'" class="izgod" :style="Til.basic.dir">{{ Til.index.izfs }} : {{ Til.index.izfr }} </view>
				<view v-if="item.izfs == '1'" class="izgod" :style="Til.basic.dir">{{ Til.index.izfs }} : {{ Til.index.izfk }} {{item.money}} {{ Til.index.rmb}}</view>
				<view v-if="item.izfs == '2'" class="izgod" :style="Til.basic.dir">{{ Til.index.izfs }} : {{ Til.index.izad }} </view>
              </swiper-item>
            </block>
          </swiper>
		  <view class="kami-list" v-if="izmod=='1'">
		      <view class="kami-item" v-for="(kami, index) in classArray" :key="index" @click="getdetali(index)">
		        <image class="kami-poster" :src="web+kami.url"></image>
		        <view class="kami-title">{{kami.name}}</view>
				<view class="kami-god" v-if="kami.izfs == '0'" :style="Til.basic.dir">{{ Til.index.izfs }} : {{ Til.index.izfr }} </view>
				<view class="kami-god" v-if="kami.izfs == '1'" :style="Til.basic.dir">{{ Til.index.izfs }} : {{ Til.index.izfk }} {{kami.money}} {{ Til.index.rmb}}</view>
				<view class="kami-god" v-if="kami.izfs == '2'" :style="Til.basic.dir">{{ Til.index.izfs }} : {{ Til.index.izad }} </view>
		      </view>
		    </view>
		  <view>
			  
		  </view>
       <!-- #endif -->
	   <!-- #ifdef H5 -->
	   <view class="swiper-case">
		   <view style="text-align: center;">请访问微信小程序</view>
		   <image style="width: 50%;height: 50%;margin-left: 200rpx;margin-top: 50rpx;" src="../../static/logo.png"></image>
	   </view>
	   <!-- #endif -->
        <view v-if="izmod=='0'" class="izharjan">By izharBegim</view>
        <!-- 占位 -->
        <view style="margin: 60px 0; height: 1px;"></view>
      </block>
	 <!-- popup -->
	 <view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @click="hidecoupon()"></view>
	 <view class="coupon" :style="'bottom:' + (couponshow == true ? '0px':'')">
	 	<scroll-view class="scrolls" scroll-y>
	 		<view v-for="(item, index) in couponList" :key="index" class="coupon_box" :style="Til.basic.dir" @click="getizde(index)">
	 			<view class="left">
	 				<view class="left_top">
	 					<text class="hui_name">{{item.name}}</text>
	 				</view>
					<!-- ￥{{item.money}} -->
	 			</view>
	 			<view class="right" :style="Til.basic.left">
					
	 				<image style="width: 70rpx;height: 70rpx;" :src="web+item.url" class="ylq"></image>
	 				<text> </text>
	 			</view>
	 		
	 			<view class="bottom">
	 				<view class="left_bottom">
	 					<text>{{item.introduce}}</text>
	 				</view>
	 			</view>
	 		</view>

	 	</scroll-view>
	 </view>
    </view>
	<!-- 加载中 -->
	<cxz-loading v-model="loadig" :loading-color="loadingColor" :logo="logo"></cxz-loading>
  </view>
</template>


<script>

  import utils from '@/utils/utils.js';
  import izhar from '@/utils/izhar.js';
  import XzLoading from "@/components/cxz-loading/cxz-loading.vue";
  let rewardedVideoAd = null;

  var app = getApp()
	export default {
		 components: {
		        XzLoading
		        },
		data() {
			return {
				loadig:true,
				data:[],
				input:'',
				classArray:[],
				cid:'',
				btnnum: 0,
				logo:'../../static/logo.png',
				// 已购买信息
				recordList: [],
				userid: 0,
				izkami:'',
				izda:[],
				web:'',
				ask:'Uzqatt',
				luanges:'',
				couponshow: false,
				couponList: [],
				lunbo:'',
				lunboad:'',
				izmod:'',
				currentDate: new Date()

			}
		},
		computed: {
		    Til() {
		        return this.$t('message');
		    }
		},
		onLoad() {
			var that = this;
			//#ifdef MP-WEIXIN
				this.getClassDatas()
			that.web = getApp().globalData.request_url
			//#endif
		
		},
		filters: {
		    formatDate(value) {
		      const date = new Date(value);
		      const year = date.getFullYear();
		      const month = date.getMonth() + 1;
		      const day = date.getDate();
		      return `${year} 年 ${month} 月 ${day} 日`;
		    }
		  },
		//#ifdef MP-WEIXIN
		onShareAppMessage: function () {
		      return {
		          title: this.data.data.shareTitle,
		          path:  'pages/index/index'
		      }
		  },
		  // #endif
		methods: {

			abuoti(){
				var t = this
				uni.navigateTo({
					url:'../../pages/weblist/weblist?aurl=' + t.gzh
				})
			},
			abuot(){
				uni.navigateTo({
					url:'/pages/about/about'
				})
			},
			talon(){
				uni.navigateTo({
					url:'/pages/index/talon'
				})
			},
			onReceive(){
				var t = this;
				t.couponList = false
			},
			getdetali(index) {    
			    var cid = this.classArray[index].cid;
			    uni.navigateTo({
			        url: '/pages/detail/detail?cid=' + cid
			    });
			    
			},
			getlunbo(index) {
				// Powerd By izharBegim
				var cid = this.lunbo[index].cid;
				uni.navigateTo({
					url:'/pages/detail/detail?cid=' + cid
				})
			},
			getizde(index){
				var cid = this.couponList[index].cid;
				uni.navigateTo({
					url:'/pages/detail/detail?cid=' + cid
				})
			},
			// #ifdef MP-WEIXIN
			getClassDatas(){
				 var that = this;
                  that.loadig = true,
				 uni.login({
				     success: function success(code) {
				         utils.getRequest("/Api/classDatas.php?code=" + code.code).then(function(res) {
				             console.log(res);
				             if (res.data.code == 200) {
								 that.lunbo = res.data.lunbo,
				                     that.data = res.data,
				                     that.classArray = res.data.class,
				 					that.tongji = res.data.tongji,
				 					that.gzh = res.data.data.shareImg,
									that.lunboad = res.data.data.lunBoad,
									that.luanges = res.data.data.til,
									that.izmod = res.data.data.izmod,
									
									that.loadig = false
									uni.setStorage({
										key:'izluange',
										data:res.data.data.til,
										success: function() {
											console.log('小程序语言缓存成功')
											that.izhari()
										}
									});
									
				             } else {
				                 uni.showModal({
				                     title: "提示",
				                     content: res.data.msg,
				                     showCancel: !1,
				                     confirmText: "重试",
				                     success: function success() {
				                         that.getClassDatas();
				                     }
				                 });
				             }
				         }).catch(function(res) {
				             console.log(res);
				             uni.showModal({
				                 title: "提示",
				                 content: "网络错误",
				                 confirmText: "重试",
				                 success: function success() {
				                     that.getClassDatas();
				                 }
				             });
				         });
				     }
				 });
			},
			// #endif
			izhari() {
				var t = this;
						uni.getStorage({
						  key: 'izluange',
						  success: function (res) {
							  	console.log(res.data,'读取小程序缓存语言成功')
						    if (res.data) {
								if(res.data == '0'){
									t.$i18n.locale = 'zh-CN'
									console.log('当前:中文')
								} else if(res.data == '1'){
									console.log('当前:维吾尔语')
									t.$i18n.locale = 'zh-UG'
								} else{
									console.log('当前:默认中文')
									t.$i18n.locale = 'zh-CN'
								}
							}
							uni.setStorage({
							    key: 'izdata',
							    data: t.data.data,
							    success: function() {
							        console.log('其他信息缓存成功');
									t.lbad()
							    }
							});
							
						  }
						});

			},
			lbad(){
				var t = this;
				if(t.data.data){
					uni.getStorage({
					  key: 'izdata',
					  success: function (res) {
						console.log(res.data,'读取设置成功')
					    
					  }
					});
				}else{
					uni.showToast({
						icon:'error',
						title:'错误'
					})
				}
				
			},
			confirm(e) {
			 this.loadig = true,
			  console.log('confirm搜索内容：' + e)
			  uni.request({
			    url: getApp().globalData.request_url + '/Api/izda.php',
			    method: 'POST',
			    header: {
			      'Content-Type': 'application/x-www-form-urlencoded',
			    },
			    data: {
			      izda: e
			    },
			    success: (res) => {
			     if (res.data.code=='200'){
					this.loadig = false,
					 this.couponList = res.data.data;
					 this.couponshow = true
				 } else if (res.data.code=='401'){
					 this.loadig = false,
					 uni.showToast({
					 	icon:Error,
						title:res.data.message
					 })
				 }
				 else if (res.data.code=='402'){
					 this.loadig = false,
				 		uni.showToast({
				 		icon:Error,
				 		title:res.data.message
				 		 })
				 }else{
					this.loadig = false, 
					uni.showToast({
					icon:'error',
					title:res.data.message
					 })
				 }
			        
			      
			    }
			  });
			},
			hidecoupon(){
			this.couponshow = false	
			},
				
		// 拉到更新
		    onReachBottom() {
		      // 触底加载更多数据
		      this.getClassDatas();
		    },
		
		}
	}
</script>

<style>
	/* By izharBegim */
	.izgod{
	padding: 0rpx 24rpx;
	    margin-left: 26rpx;
	    height: 50rpx;
	    line-height: 40rpx;
	    border-radius: 0rpx 0rpx 40rpx 40rpx;
	    background: #4b75ff;
	    color: #FFF;
	    font-size: 24rpx;
	    z-index: 9999999;
	    width: 80%;
	    text-align: center;
	    margin-top: -52rpx;
	    box-shadow: inset 0px -1px 2px 1px #2196f300;
	}
	.izgodi{
	      height: 75rpx;
	      line-height: 74rpx;
	      border-radius: 40rpx 40rpx 0rpx 0rpx;
	      background: #4b75ff;
	      color: #FFF;
	      font-size: 32rpx;
	      z-index: 9999999;
	      width: 100%;
	      text-align: center;
	      box-shadow: inset 0px -1px 2px 1px #2196f300;
	}
	.izharjan{
		margin: auto;
		text-align: center;
		font-size: 27rpx;
		color: #ababab;
		margin-top: -88rpx;
	}
	.cover-fixed {
	  position: fixed;
	  z-index: 9999999;
	  top: 0;
	  left: 0;
	  width: 100%;
	}
	
	.cover_bar {
	  height: 170rpx;
	  width: 100%;
	  display: flex;
	  padding-left: 28rpx;
	  align-items: center;
	}
	
	.cover_bar_srcoll {
	  backdrop-filter: blur(10px);
	}
	
	.cover-user {
	    height: 70rpx;
	    width: 350rpx;
	    overflow: hidden;
	    margin-top: 105rpx;
	    color: #5a5a5a;
	}
	

	
	/* 顶部信息 */
	.index-top {
	  height: 760rpx;
	  width: 100%;
	  position: relative;
	}
	

	/* 金刚区 */
	.group-icon-view {
	  margin-top: -129rpx;
	      display: flex;
	      flex-wrap: wrap;
	      width: 94%;
	      margin-left: 3%;
	      border-radius: 20rpx;
	      height: 236rpx;
	      margin-bottom: 25rpx;
	      color: #fff;
	}
	
	.group-icon-item {
	  width: 25% !important;
	  padding: 0 !important;
	  margin: 40rpx 0 !important;
	  background-color: unset !important;
	  text-align: center;
	  flex-shrink: 0;
	}
	
	.group-icon-icon {
	  height: 100rpx;
	  width: 100rpx;
	  margin: auto;
	}
	
	.group-icon-text {
	  font-size: 24rpx;
	  text-align: center;
	  margin-top: 20rpx;
	}
	
	/* 公告 */
	.notice {
	      padding: 30rpx;
	      border-radius: 20rpx;
	      background: #4b75ff;
	      color: #FFF;
	      line-height: 50rpx;
	      margin: 30rpx 28rpx;
	      margin-top: -15rpx;
	}
	

	
	/* .案例区 */
	.swiper-case {
	  height: 660rpx;
	}
	
	.swiper-case-item {
	  height: 600rpx !important;
	}
	
	.swiper-case-list {
	  width: 90%;
	  height: 85%;
	  margin: auto;
	  border-radius: 40rpx;
	  box-shadow: rgb(230, 230, 230) 1rpx 8rpx 26rpx;
	  position: relative;
	  overflow: hidden;
	}
	
	.swiper-case-flex {
	    display: flex;
	    justify-content: start;
	    align-items: center;
	    margin: 3rpx 9rpx -8rpx 14rpx;
	    color: #2162f3;
	}
	
	.swiper-case-title {
	  font-size: 30rpx;
	  font-weight: bold;
	
	}
	
	.swiper-case-v {
	  padding: 0rpx 24rpx;
	  margin-left: 20rpx;
	  height: 40rpx;
	  line-height: 40rpx;
	  border-radius: 40rpx;
	  background: #3B68FF;
	  color: #FFF;
	  font-size: 20rpx;
	}
	.swiper-case-v-red{
	  background: red !important;
	  padding: 0rpx 24rpx;
	  margin-left: 20rpx;
	  height: 40rpx;
	  line-height: 40rpx;
	  border-radius: 40rpx;
	  color: #FFF;
	  font-size: 20rpx;
	}
	
	.swiper-case-desrc {
	     margin: 1rpx 11rpx;
	         color: #0064f9;
	         font-size: 24rpx;
	         line-height: 43rpx;
	}
	
	.swiper-case-img {
	height: 282rpx;
	    width: 444rpx;
	    left: 50%;
	    -webkit-transform: translateX(-50%);
	    transform: translateX(-50%);
	    position: absolute;
	    bottom: 60rpx;
	}
	
	/* 标题 */
	.ds-felx {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.izda{
		    margin-top: -368rpx;
		    flex-wrap: wrap;
		    width: 94%;
		    margin-left: 3%;
	}

	.info-bg {
	  height: 660rpx;
	  width: 100%;
	  position: relative;
	}
	
	.info-img {
	    position: absolute;
	    right: -7rpx;
	    top: 19%;
	    height: 500rpx;
	    width: 740rpx;
	}
	
	.content {
		display: flex;
		flex-direction: column;
	
	}
	
	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 900;
		opacity: 0.7;
	}
	
	/* 优惠券 */
	.coupon {
		background-color: #fff;
		border-radius: 10upx 10upx 0 0;
		position: fixed;
		left: 0;
		bottom: -1000upx;
		z-index: 999;
		transition: all 0.3s;
	}
	
	.scrolls {
		width: 100vw;
		height: 60vh;
		padding-top: 10upx;
		z-index: 500;
	}
	.coupon_box {
		margin: 20upx;
		padding: 20upx;
		box-shadow: 0upx 0upx 10upx #ddd;
		position: relative;
		border-radius: 10upx;
		padding-bottom: 10upx;
		overflow: hidden;

	}

	.coupon_box .left {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		border-bottom: 1upx solid #eee;
		padding-bottom: 20upx;
		position: relative;
	}

	.coupon_box .left .ylq {
		width: 60upx;
		height: 45upx;
		position: absolute;
		top: 0;
		right: 140upx;
	}

	.coupon_box .left .hui {
		width: 40upx;
		height: 40upx;
		font-size: 22upx;
		color: #fff;
		background-color: rgba(255, 84, 110, .8);
		border-radius: 8upx;
		line-height: 40upx;
		text-align: center;
		display: inline-block;
		transform: translateY(-5upx);
	}

	.coupon_box .left .left_top {
		width: 80vw;
		display: flow-root;
		font-size: 26upx;
		font-weight: bold;

	}

	.left_top .hui_name {
		line-height: 60upx;
		height: 60upx;
		margin-left: 20upx;
		display: inline-block;
		font-size: 28upx;
	}

	.left_bottom {
		font-size: 24upx;
		font-weight: 500;
		color: #333;
		height: 60upx;
		line-height: 60upx;
	}

	.coupon_box .right {
		position: absolute;
		right: 20upx;
		top: 25upx;
		text-align: center;
	}

	.coupon_box .right .money {
		font-size: 45upx;
		margin-bottom: 10upx;
	}

	.coupon_box .right text {
		font-size: 24upx;
		color: #999;
	}

	.coupon_box .bottom {
		height: 60upx;
		line-height: 60upx;
		display: flex;
		align-content: flex-start;
		font-size: 24upx;
		margin-top: 10upx;

	}

	.coupon_box .bottom view {
		margin-right: 20upx;
		color: #888;
	}

	.receiveBtn {
		position: absolute;
		left: calc(100vw - 86px);

		width: 58px;
		height: 24px;
		line-height: 24px;

		border-radius: 4px;
		background-color: #fa436a;
		color: white !important;

		font-size: 12px;
		text-align: center;
		margin-top: 2px;

	}
	.txlogo{
		margin-top: 140rpx;
		text-align: center;
		font-family: cursive;
		font-size: 49rpx;
		color: #FF5722;
	}
	.swiper {
	  width: 96%;
	  height: 144px;
	  margin: auto;
	  margin-top: -383rpx;
	  border-radius: 25rpx;
	  
	}
	
	.swiper-img {
	  width: 100%;
	  height: 100%;
	  border-radius: 25rpx;
	}
	.kami-list {
	  display: flex;
	  flex-wrap: wrap;
	}
	
	.kami-item {
		width: 46%;
		margin: 1.5%;
		padding: 0px;
		background-color: #f3f3f3;
		border-radius: 5px;
		text-align: center;
		box-shadow: 9px 0px 16px 0px #00000014;
	}
	
	.kami-poster {
	  width: 100%;
	  height: 130px;
	  object-fit: cover;
	  border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	
	.kami-title {
	  margin-top: 4rpx;
	  font-size: 25rpx;
	  margin-bottom: 10rpx;
	  color: #0568e2;
	}
	.kami-god {
	  background-color: #4b75ff;
	  padding: 5px;
	  color: white; 
	  order: -1; 
	  border-radius: 0rpx 0rpx 20rpx 20rpx;
	  font-size: 26rpx;
	}

</style>
